import Link from "next/link";
import { FC } from "react";
import classes from "./event-item.module.css";
interface EventItemProps {
  props: any;
}
const EventItem: FC<EventItemProps> = ({
  props: { title, image, date, location, id },
}) => {
  const humanReadaleDate = new Date(date).toLocaleDateString("en-US", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
  const exploreLink = `/events/${id}`;
  return (
    <li>
      <div className="mb-2">
        <img src={"/" + image} className={classes.wh} />
        <div>
          <h2>{title}</h2>
          <div className="font-bold">
            <time>{humanReadaleDate}</time>
          </div>
          <div>
            <address>{location}</address>
          </div>
        </div>
        <div>
          <Link href={exploreLink}>explore event</Link>
        </div>
      </div>
    </li>
  );
};
export default EventItem;
